import React, { useEffect, useState }  from 'react';
import '@antv/s2-react/dist/style.min.css';
import './index.css'
import { SheetComponent } from '@antv/s2-react';
import { s2DataConfig } from '../assets/test-json.js';
import 'antd/es/cascader/style/index.css';

//S2 提供开箱即用的场景表组件 —— 趋势分析表
const Test1 = () => {
    const [dataCfg, setDataCfg] = useState([]);
    const [themeCfg, setThemeCfg] = useState({
        name: 'colorful',
    });
    useEffect(() => {
        getdata();
    }, []);
    const getdata = () => {
        fetch(
            'https://gw.alipayobjects.com/os/bmw-prod/3c2009ce-8c2a-451d-b29a-619a796c7903.json',
        ).then((res) => res.json()).then((dataCfg) => {
            setDataCfg(dataCfg)
        });
    }
    
    // 3. 添加配置
    const s2Options = {
        tooltip: {
            showTooltip: true,
          },
        width: 600,
        height: 300,
        showSeriesNumber: false,
        interaction: {
            hoverHighlight: true,
          },
        cornerText: '指标层级',
        hierarchyType: 'customTree',
        // 通过配置 conditions 实现字段标记
        conditions: {
            text: [
            {
                field: 'number',
                mapping: (value, cellInfo) => {
                    const { meta } = cellInfo;
                    if (
                        meta?.fieldValue?.values[0][0] === value ||
                        !value ||
                        !meta?.fieldValue
                    ) {
                        return {
                            fill: '#000',
                        };
                    }
                    return {
                        fill: value > 0 ? 'red' : 'green',
                    };
                },
            },
            ],
        },
        style: {
            cellCfg: {
                valuesCfg: {
                    // 非必填: 指定原始字段, 用于 导出和 tooltip 展示
                    originalValueField: 'originalValues',
                    // 非必填: 是否显示原始值
                    showOriginalValue: true,
                },
            },
        },
    };
    return (
        <div>
            <SheetComponent
            sheetType="strategy"
            adaptive={false}
            dataCfg={dataCfg}
            themeCfg={themeCfg}//主题
            options={s2Options}
            />
        </div>
    );
}

export default Test1;
